<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" :round="10" closeable>

			<view class="flex-col section_2">
				<view class="flex-row justify-between items-center group">
					<text class="font text_2">用车时间</text>

				</view>
			
				<view class="flex-col mt-17-5">
					<view class="flex-col justify-start items-start relative group_2">
						<image class="image_2" src="/static/icon/lb.png" />
						<view class="flex-col items-start section_3 pos">
							<text class="font_2">为不影响您的行程，请避开限行时段 (07:00-10:00, 16:00</text>
							<text class="font_2 mt-2-5">-20:00)</text>
						</view>
					</view>
					<view class="flex-row justify-between items-center group_3">
					</view>
					<view class="flex-row items-end group_4">
						<view class="flex-col shrink-0 section_5">
							<view class="flex-col items-start mt-29"
								:style="{ backgroundColor: leindex == index ? '#fff' : '' }"
								v-for="(item,index) in timelist " @click="tableft(index)">
								<view class="font_5" style="display: flex;">{{item.date_week}}
									<view v-if="item.date_type"
										class="flex-col justify-start items-center shrink-0 text-wrapper ml-3">
										<text class="text_6">{{item.date_type}}</text>
									</view>
								</view>
								<text class="font_4 mt-7">{{item.date_str}}</text>
							</view>
						</view>
						<view style="width:20rpx;"> </view>
						<view class="flex-col flex-1 group_5 ml-13-5">
							<view class="flex-col mt-22-5">
								<view class="flex-row justify-between items-center group_9"
									:class="item.time_type == 0? 'element':'' "
									:style="{ backgroundColor: riindex == index ? ' #f4f5f7' : '' }"
									v-for="(item,index) in timeslist" @click="tabright(index)">
									<text class="font_3 text_9">{{item.time_str}}</text>
									<!-- {{item}} -->
									<!-- {{time_type}} 不能选  是否可选 1 可以 0 不可以  -->
									<!-- 选中 -->
									<image v-if="riindex  == index" class="shrink-0 image_3 ml-167-5"
										src="/static/icon/djxz.png" />
									<!-- 未选中 -->
									<view v-else class="group_7"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col justify-start items-center button text-wrapper_2" @click="battime"><text
							class="text_11">确定</text></view>
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		SelectDateList,
		SelectTimeList
	} from '@/utils/user.js'

	export default {
		name: "Timing",
		data() {
			return {
				typesid: 0,
				show: false,
				leindex: 0,
				riindex: -1,
				timelist: [],
				timeslist: [],

				// 全电梯 免费   楼梯一层 免费  楼梯二层 20 元

			};
		},
		onLoad() {

		},
		created() {
			this.time()

		},


		methods: {

			// 确定时间
			battime() {
 
debugger
				if (this.riindex == -1) {

					uni.showToast({
						title: '请选择时间',
						icon: 'none',
						duration: 2000
					})

				} else {

					var timess = this.timeslist[this.riindex]

debugger
					// 触发自定义事件，并传递用户信息给父组件
					this.$emit('loginSuccess', timess);
					
					
					if(this.typesid == 1){
						this.$emit('loginSuccess', timess);
						
					}else{
						this.$emit('loginSucce', timess);
					}
					
					

					this.show = false;
				}



			},

			time() {

				SelectDateList().then(res => {

					console.log(res)

					this.timelist = res.data.data
					this.times(res.data.data[0].date_int)

				}).catch(error => {
					console.error('Init 方法执行出错：', error);
				});
			},

			times(e) {



				SelectTimeList(e).then(res => {

					console.log(res)
					this.timeslist = res.data.data
				}).catch(error => {
					console.error('Init 方法执行出错：', error);
				});

			},



			open(e) {
			 
				if (e) {
					this.typesid = e
					this.show = true
				}


			},

			close() {

				this.show = false

			},
			// 日期点击
			tableft(i) {
				console.log(i)
				this.leindex = i
				this.riindex = -1
				
				debugger

				var date_int = this.timelist[i].date_int
				this.times(date_int)

			},

			// 时间点击
			tabright(i) {

				if (this.timeslist[i].time_type == 1) {
					this.riindex = i

				} else {

					uni.showToast({
						title: '当前时间暂不可选',
						icon: 'none',
						duration: 2000
					})
					return


				}


			},

		}
	}
</script>

<style scoped>
	.element {
		opacity: 0.5;
		/* 这将使元素半透明 */
	}

	.mt-17-5 {
		margin-top: 35rpx;
	}

	.mt-2-5 {
		margin-top: 5rpx;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.ml-167-5 {
		margin-left: 335rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.mt-29 {
		/* margin-top: 58rpx; */

		padding: 28rpx 36rpx 28rpx;

	}

	.ml-13-5 {
		/* margin-left: 27rpx; */
	}

	.mt-22-5 {
		/* margin-top: 45rpx; */
		/* border: 2px solid ; */
	}

	.font {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 30.06rpx;
	}

	.section_2 {
		padding: 36rpx 0 52rpx;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.group {
		padding-left: 36rpx;
		padding-right: 24rpx;
	}

	.text_2 {
		color: #222222;
	}

	.image {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	.group_2 {
		padding: 37rpx 0;
	}

	.image_2 {
		margin-left: 52rpx;
		width: 27rpx;
		height: 26rpx;
	}

	.section_3 {
		padding: 24rpx 14rpx 14rpx 56rpx;
		background-color: #2b8eff1f;
		border-radius: 8rpx;
	}

	.pos {
		position: absolute;
		left: 34rpx;
		right: 34rpx;
		top: 0;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		color: #596e78;
	}

	.group_3 {
		margin-top: 21rpx;
		padding: 0 34rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 21.12rpx;
		color: #222222;
	}

	.text_3 {
		line-height: 25.92rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 21.12rpx;
		color: #666666;
	}

	.section_4 {
		padding: 33rpx 28rpx 33rpx 36rpx;
		background-color: #f4f5f7;
		border-radius: 8rpx;
		height: 94rpx;
	}

	.text_4 {
		line-height: 20.78rpx;
	}

	.image_3 {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
	}

	.group_4 {
		margin-top: 11rpx;
	}

	.section_5 {
		/* padding: 28rpx 36rpx 38rpx; */
		background-color: #f4f5f7;
		border-radius: 8rpx;
		height: 630rpx;
		overflow-y: scroll;



	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 24.92rpx;
		color: #222222;
	}

	.text_5 {
		line-height: 25.3rpx;
	}

	.text-wrapper {
		padding: 4rpx 0;
		background-color: #ff521c;
		border-radius: 98rpx;
		width: 54rpx;
		height: 24rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		line-height: 16.48rpx;
	}

	.group_5 {
		margin-right: 33rpx;

		margin-bottom: 10rpx;
		border-bottom: solid 1rpx #f4f5f7;
		/* #f4f5f7 */
		height: 630rpx;
		overflow-y: scroll;
	}

	.group_6 {
		padding-left: 34rpx;
		padding-right: 29rpx;
	}

	.text_7 {
		line-height: 20.78rpx;
	}

	.group_7 {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
		border-left: solid 1rpx #d9d9d9;
		border-right: solid 1rpx #d9d9d9;
		border-top: solid 1rpx #d9d9d9;
		border-bottom: solid 1rpx #d9d9d9;
	}

	.divider {
		background-color: #f4f5f7;
		height: 1rpx;
	}

	.group_8 {
		padding-left: 34rpx;
		padding-right: 28rpx;
	}

	.text_8 {
		line-height: 20.78rpx;
	}

	.group_9 {
		/* margin-top: 42rpx; */
		padding: 48rpx 28rpx 42rpx 34rpx;
		border-top: solid 1rpx #f4f5f7;
		border-bottom: solid 1rpx #f4f5f7;
		border-radius: 5px;
	}

	.text_9 {
		line-height: 20.78rpx;
	}

	.group_10 {
		padding: 46rpx 28rpx 44rpx 34rpx;
	}

	.text_10 {
		line-height: 20.78rpx;
	}

	.button {
		margin: 47rpx 52rpx 0;
	}

	.text-wrapper_2 {
		padding: 28rpx 0;
		background-color: #2b8eff;
		border-radius: 8rpx;
	}

	.text_11 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 33.48rpx;
	}
</style>